<template>
  <div class="tools" :class="{'show-tools' : isShow}">
    <ul class="tools-sidebar">
      <li>
        <button class="tools-btn" @click="openTheme">切换主题</button>
      </li>
      <li>
        <button class="tools-btn" @click="downloadData('notepad.txt',getData)">下载数据</button>
      </li>
      <li>
        <button class="tools-btn" @click="uploadData">导入数据</button>
      </li>
      <li>
        <button class="tools-btn" @click="openTable">编辑数据</button>
      </li>
      <li>
        <!-- 此处点击该按钮 弹出弹框 点击取消对话框隐藏 确定清空所有数据 -->
        <button class="tools-btn" @click="showDialog">清空数据</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  // 父组件App.vue传来的用来决定是否显示sidebar
  props: ['isShow'],
  computed: {
    getData() {
      let that = this
      return JSON.stringify(that.$store.state)
    }
  },
  methods: {
    openTheme() {
      this.$emit('opentheme');
    },
    openTable() {
      this.$emit('opentable')
    },
  
  // 清空数据 的弹出对话框
    showDialog() {
      this.$emit('cleardialog')
    },

    // 下载数据
    downloadData(fileName, content) {
      let blob = new Blob([content])
      let aTag = document.createElement('a')
      aTag.download = fileName //下载后文件名
      aTag.href = URL.createObjectURL(blob) // 链接
      aTag.click() //点击下载
      URL.revokeObjectURL(blob); // 释放掉blob对象
    },

    // 导入数据
    uploadData() {
      this.$emit('uploadData')
    }
  }
}
</script>

<style lang="scss" scoped>
// $border_color: #00D1B2;
// $bg_color: #00D1B2;
.tools {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6em 4.7em 3em;
  // 默认不显示 将sidebar平移出去
  transform: translateX(-250px);
  transition: transform .3s; // 平移的过渡动画
  .tools-sidebar {
    padding-left: 0;

    list-style: none;
    li {
      margin-bottom: 2em;
      .tools-btn {
        padding: 0.5em 1em;
        color: #fff;
        border: none;
        border-radius: .2em;
        // background-color: $bg_color;
      }
    }
  }

  &.show-tools {
    // 显示时 将sidebar移动进来
    transform: translateX(0);
  }
}
</style>